<template>
    <el-table :data="tableData" v-bind="$attrs" border
        :style="`margin-top: 12px; height: calc(100vh - ${h ? 450 : 213}px);cursor:default;`">
        <el-table-column v-if="serialnumber" width="60px" type="index" label="序号" />
        <template v-for="(item, index) in columns" :key="index">
            <el-table-column v-bind="getColumnProps(item)" width="auto" :min-width="item.width">
                <!-- show-overflow-tooltip -->
                <template #default="scope">
                    <slot :name="item.prop" :row="scope.row" :$index="scope.$index">
                        <template v-if="item.render">
                            <template v-if="typeof item.render === 'object'">
                                <component :is="item.render.name" v-bind="getRenderProps(item.render.props, scope.row)"
                                    @click="handleRenderClick(item.render.onClick, scope.row)">
                                    <template v-if="Array.isArray(getRenderChildren(item.render.children, scope.row))">
                                        <component
                                            v-for="(child, index) in getRenderChildren(item.render.children, scope.row)"
                                            :key="index" :is="child.name" v-bind="child.props">
                                            {{ child.children }}
                                        </component>
                                    </template>
                                    <template v-else-if="item.render.name === 'el-icon'">
                                        <component :is="getRenderChildren(item.render.children, scope.row)" />
                                    </template>
                                    <template v-else>
                                        {{ getRenderChildren(item.render.children, scope.row) }}
                                    </template>
                                </component>
                            </template>
                            <template v-else>
                                {{ item.render(scope.row) }}
                            </template>
                        </template>
                        <template v-else>
                            {{ scope.row[item.prop] }}
                        </template>
                    </slot>
                </template>
            </el-table-column>
        </template>
        <el-table-column v-if="operations?.length" label="操作" :width="operationWidth" fixed="right">
            <template #default="scope">
                <template v-for="(btn, index) in operations" :key="index">
                    <el-button v-if="!btn.hidden ? true : btn.hidden(scope.row)" v-bind="getButtonProps(btn)"
                        @click="handleOperation(btn, scope.row)">
                        <component :is="btn.icon" />
                        {{ btn.label }}
                    </el-button>
                </template>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>


const props = defineProps({
    columns: {
        type: Array,
        required: true
    },
    serialnumber: {
        type: Boolean,
        default: false
    },
    tableData: {
        type: Array,
        default: () => []
    },
    operations: {
        type: Array,
        default: () => []
    },
    operationWidth: {
        type: [String, Number],
        default: 'auto'
    },
    h: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['operation'])

const getColumnProps = (item) => {
    const { render, ...rest } = item
    return rest
}

const getRenderProps = (props, row) => {
    if (!props) return {}
    return typeof props === 'function' ? props(row) : props
}

const getRenderChildren = (children, row) => {
    if (!children) return ''
    return typeof children === 'function' ? children(row) : children
}

const handleRenderClick = (onClick, row) => {
    if (typeof onClick === 'function') {
        onClick(row)
    }
}

const getButtonProps = (btn) => {
    const { type = 'primary', size = 'small', link = true, ...rest } = btn
    return { type, size, link, ...rest }
}

const handleOperation = (btn, row) => {
    if (btn.onClick) {
        btn.onClick(row)
    }
    console.log('表格操作', btn)
    emit('operation', btn.code, row)
}
</script>

<style lang="less"></style>